<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">按钮</button>
    <script>
        /*
            总结：
                a. 箭头函数没有 arguments 伪数组，使用 rest 参数替代
                b. 箭头函数不能作为构造器使用
                c. 箭头函数内部的this指向其外部的书写环境(内部不存在this指向)
        */

        // 1. 箭头函数使用的注意事项
        // 在箭头函数中没有arguments, 只能使用剩余参数，不能简写
        let fn = (...list) => {
            console.log(list);
        }
        // fn(4, 5, 6, 7, 8, 9, 10);

        // 箭头函数不能作为构造器
        let Person = (str) => {
            this.uname = str;
        }
        // let p1 = new Person('张三');

        // 在箭头函数中的this， 指向其书写的环境
        let uname = '古力娜扎';
        let obj = {
            uname: '迪丽热巴',
            fn: () => {
                console.log(this);  // window
                console.log(this.uname);
            },
            fun: function () {
                console.log(this); // obj
                setTimeout(() => {
                    console.log(this.uname);
                }, 0)

                setTimeout(function () {
                    console.log(this.uname);
                }.bind(this), 0)
            }
        }
        // obj.fn();
        obj.fun();

        // 注册事件
        btn.onclick = () => {
            console.log(this);
        }

    </script>
</body>

</html>